import { FC, useMemo, useState } from 'react';
import useFetchGroupSwr from '@/hooks/swr/useFetchGroupSwr';
import InfoCardSkeleton from '@/components/info-card/InfoCardSkeleton';
import styles from './groupGrouping.module.less';
import MinerCountStrip from '@/components/miner-count-strip/MinerCountStrip';
import { AiOutlineDown, AiOutlineRight } from 'react-icons/all';
import Cell from '@/components/cell/Cell';
import CoinIcon from '@/components/coin-icon/CoinIcon';
import CopyAble from '@/components/copy-able/CopyAble';
import formatShortWallet from '@/utils/format/formatShortWallet';
import { Button } from 'antd';
import { history } from 'umi';
import GpuTemp from '@/components/gpu-temp/GpuTemp';
import { MonitorPageModel } from '@/types/monitor';
import { Group } from '@/types/group';
import useForceUpdate from '@/hooks/forceUpdate';
interface IGroupGroupingProps {
  mid: number;
  monitorInfo: MonitorPageModel;
}

const GroupGrouping: FC<IGroupGroupingProps> = (props) => {
  console.log(props, 'props');
  const { mid, monitorInfo } = props;
  const [openedGid, setOpenedGid] = useState<number[]>([]);
  const { data: groupPageModel } = useFetchGroupSwr(mid, undefined);

  const AiOutlineRightIconStyle = { color: '#12273F', fontSize: '14px' };
  const forceUpdate = useForceUpdate();
  const toggle = (gid: number) => {
    const group = groupPageModel?.groupList.find((group) => group.gid === gid);
    if (group) {
      group.isOpen = !group.isOpen;
    }
    forceUpdate();
  };

  /**
   * 纯组件,只依赖一个groupPageModel
   */
  const GroupItem = useMemo(() => {
    return (props: { gid: number; group: Group }) => {
      const { group, gid } = props;
      const open = !!group.isOpen;
      return (
        <div key={gid} className={`${styles.groupItemWrap}`}>
          <div
            className={`flex  ${styles.groupItem} ${
              open ? styles.groupItemOpen : ''
            }`}
          >
            <div
              className={`flex ai-center ${styles.iconWrap}`}
              onClick={() => toggle(gid)}
            >
              {open ? (
                <AiOutlineDown
                  className={styles.downIcon}
                  style={AiOutlineRightIconStyle}
                />
              ) : (
                <AiOutlineRight
                  className={styles.rightIcon}
                  style={AiOutlineRightIconStyle}
                />
              )}
            </div>
            <div
              className={`flex-1 ${styles.name}`}
              onClick={() => toggle(gid)}
            >
              {group.name}
            </div>
            <div
              className={styles.count}
              onClick={() => history.push(`/miner/${mid}/${gid}/main`)}
            >
              {group.miner_count.online_count}/{group.miner_num}
            </div>
            <MinerCountStrip
              containerStyle={{ marginTop: '7px' }}
              minerCount={group.miner_count}
              miner_num={group.miner_num}
            />
          </div>
          {open ? (
            <div>
              <Cell
                title="实时算力"
                value={
                  <div className={`flex ai-center`}>
                    {' '}
                    <CoinIcon coin={group.main_coin} size={22} />
                    {group.hashFormat}
                  </div>
                }
              />
              <Cell
                title="钱包地址"
                value={
                  <CopyAble
                    text={group.main_wallet}
                    showText={formatShortWallet(group.main_wallet)}
                  />
                }
              />
              <Cell title="矿池地址" value={group.pool} />
              <Cell
                title="GPU最高温度"
                value={
                  <GpuTemp
                    temp={parseInt(group.hottest || '0')}
                    t1={monitorInfo.info.temperature1}
                    t2={monitorInfo.info.temperature2}
                  />
                }
                borderBottom={true}
              />
              <div className={`flex jc-end ${styles.btnWrap}`}>
                <Button
                  size="small"
                  onClick={() => history.push(`/miner/${mid}/${gid}/main`)}
                  type="primary"
                >
                  矿机
                </Button>
                <Button
                  size="small"
                  onClick={() => history.push(`/miner/${mid}/${gid}/card`)}
                  type="primary"
                >
                  显卡
                </Button>
                <Button
                  size="small"
                  onClick={() => history.push(`/miner/${mid}/${gid}/card`)}
                  type="primary"
                >
                  分组配置
                </Button>
              </div>
            </div>
          ) : null}
        </div>
      );
    };
  }, [groupPageModel]);

  if (!groupPageModel) {
    return <InfoCardSkeleton rows={10} />;
  }

  return (
    <div className={styles.groupGrouping}>
      <div className={styles.groupCardWrap}>
        {groupPageModel.groupList.map((group) => {
          return <GroupItem gid={group.gid} key={group.gid} group={group} />;
        })}
      </div>
    </div>
  );
};

export default GroupGrouping;
